import React, { useState } from 'react'
import { NavBar, Icon, WingBlank, InputItem, Button } from 'antd-mobile'

import { passwordReg } from '../../../utils/regs'
import { reqRegister } from '../../../api/register'

import './index.less'
import msg from './msg.png'

export default function RegsiterPassword({ location, history }) {
  // 是否是密文
  const [isCiphertext, setIsCiphertext] = useState(true)
  const [isDisabled, setIsDisabled] = useState(true)
  const [password, setPassword] = useState('')

  const changeIsCiphertext = () => {
    setIsCiphertext(!isCiphertext)
  }

  const handleInputChange = (val) => {
    if (passwordReg.test(val)) {
      setIsDisabled(false)
    } else {
      setIsDisabled(true)
    }
    setPassword(val)
  }
  const next = async () => {
    // location.state是服务器响应的数据
    const res = await reqRegister(location.state, password)

    history.push('/', res.data.data.user)
    console.log(res.data.data.user)
  }

  return (
    <div className="verify-password">
      <NavBar
        mode="light"
        icon={<Icon className="icon-left" type="left" />}
        onLeftClick={() => {}}
      >
        硅谷注册
      </NavBar>
      <WingBlank>
        <img className="verify-code-msg" src={msg} alt="msg" />
        <p className="verify-code-tip">请设置登录密码</p>
        <InputItem
          type={isCiphertext ? 'password' : 'text'}
          className="verify-password-btn input-item"
          placeholder="请设置8-20位登录密码"
          value={password}
          onChange={handleInputChange}
          extra={
            <span
              onTouchEnd={changeIsCiphertext}
              className={`iconfont verify-password-icon icon-${
                isCiphertext ? 'hide' : 'browse'
              }`}
            ></span>
          }
        />
        <p className="verify-password-text">
          密码由8-20位字母、数字或半角符号组成，不能是10位以下纯数字/字母/半角符号，字母需区分大小写
        </p>
        <Button
          type="primary"
          disabled={isDisabled}
          className="btn"
          onClick={next}
        >
          下一步
        </Button>
        <span className="verify-code-question">
          遇到问题?请<span>联系客服</span>
        </span>
      </WingBlank>
    </div>
  )
}
